<!DOCTYPE html>
<html>
<body>
<canvas id="physicsCanvas" width="550" height="500"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define parameters
    const cx = 275;
    const cy = 240;
    const R = 200;
    const r0 = 80;
    const arrowHeadLength = 12;
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // Helper function to draw a line with a filled arrow at the end
    function drawArrow(fromX, fromY, toX, toY) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - arrowHeadLength * Math.cos(angle - Math.PI / 7), toY - arrowHeadLength * Math.sin(angle - Math.PI / 7));
        ctx.lineTo(toX - arrowHeadLength * Math.cos(angle + Math.PI / 7), toY - arrowHeadLength * Math.sin(angle + Math.PI / 7));
        ctx.closePath();
        ctx.fill();
    }

    // Draw outer circle
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw inner circle
    ctx.beginPath();
    ctx.arc(cx, cy, r0, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw radius R
    const angleR = -135 * Math.PI / 180;
    const endXR = cx + R * Math.cos(angleR);
    const endYR = cy + R * Math.sin(angleR);
    drawArrow(cx, cy, endXR, endYR);

    // Draw radius r0
    const angler0 = -45 * Math.PI / 180;
    const endXr0 = cx + r0 * Math.cos(angler0);
    const endYr0 = cy + r0 * Math.sin(angler0);
    drawArrow(cx, cy, endXr0, endYr0);

    // Draw ground connection
    const angleGround = 75 * Math.PI / 180;
    const startXGround = cx + R * Math.cos(angleGround);
    const startYGround = cy + R * Math.sin(angleGround);
    const endYGround = startYGround + 40;
    ctx.beginPath();
    ctx.moveTo(startXGround, startYGround);
    ctx.lineTo(startXGround, endYGround);
    ctx.stroke();

    // Draw ground symbol
    const groundX = startXGround;
    let groundY = endYGround;
    ctx.beginPath();
    ctx.moveTo(groundX - 25, groundY);
    ctx.lineTo(groundX + 25, groundY);
    ctx.stroke();
    groundY += 8;
    ctx.beginPath();
    ctx.moveTo(groundX - 18, groundY);
    ctx.lineTo(groundX + 18, groundY);
    ctx.stroke();
    groundY += 8;
    ctx.beginPath();
    ctx.moveTo(groundX - 12, groundY);
    ctx.lineTo(groundX + 12, groundY);
    ctx.stroke();

    // Add labels
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Label R
    ctx.font = 'italic 28px Times New Roman';
    const labelRX = cx + (R / 1.7) * Math.cos(angleR + 0.15);
    const labelRY = cy + (R / 1.7) * Math.sin(angleR + 0.15);
    ctx.fillText('R', labelRX, labelRY);

    // Label r0 (with subscript)
    const labelr0X_base = cx + (r0 + 20) * Math.cos(angler0) + 10;
    const labelr0Y_base = cy + (r0 + 20) * Math.sin(angler0) + 10;
    ctx.font = 'italic 28px Times New Roman';
    ctx.textAlign = 'start';
    ctx.fillText('r', labelr0X_base, labelr0Y_base);
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('0', labelr0X_base + 8, labelr0Y_base + 8);

    // Label U0 (with subscript)
    ctx.textAlign = 'center';
    const labelUX_base = cx - 10;
    const labelUY_base = cy - r0 - 35;
    ctx.font = 'italic 28px Times New Roman';
    ctx.fillText('U', labelUX_base, labelUY_base);
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('0', labelUX_base + 12, labelUY_base + 8);

</script>
</body>
</html>